<template>
  <section class="section">
    <div class="uedit-top">
      <div class="btn-group_operation">
        <div class="icon-group-item">
          <svg-icon icon-class="html" class="icon icon-html" />
          <p class="text">源码</p>
        </div>
        <div class="icon-group-item">
          <svg-icon icon-class="js" class="icon icon-js" />
          <p class="text">脚本</p>
        </div>
        <div class="icon-group-item">
          <svg-icon icon-class="css" class="icon icon-css" />
          <p class="text">样式</p>
        </div>
        <div class="icon-group-item">
          <svg-icon icon-class="version" class="icon icon-version" />
          <p class="text">版本</p>
        </div>
        <div class="icon-group-item" @click="handleFormInfo">
          <svg-icon icon-class="form_info" class="icon icon-form_info" />
          <p class="text">表单属性</p>
        </div>
      </div>
      <div class="btn-group_other">
        <div class="icon-group-item">
          <svg-icon icon-class="form_info" class="icon icon-form_info" />
          <p class="text">预览</p>
        </div>
        <div class="icon-group-item">
          <svg-icon icon-class="save" class="icon icon-save" />
          <p class="text">保存模板</p>
        </div>
      </div>
    </div>
    <div class="uedit-wrap">
      <div class="menu">
        <div class="component">
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="基础字段" name="1">
              <DefaultMenu @ondragstart="ondragstart" @dragend="dragend" />
            </el-collapse-item>
            <el-collapse-item title="容器控件" name="2">
              <Container @ondragstart="ondragstart" @dragend="dragend" />
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="sketchpad">
        <el-card
          ref="card"
          class="box-card"
          :body-style="{display: 'flex',flex: 1, padding: 0, flexDirection: 'column'}"
        >
          <div class="view-tabs-bar">
            <div class="view-tabs">
              <span
                v-for="(item, index) in viewTabs"
                :key="index"
                class="view-tabs_item"
                :class="{active : viewTabsIndex === index}"
                @click="handleClickViewTabs(index)"
              >
                {{ item.title }}
                <i v-if="index !== 0" class="el-icon-close" @click.stop="handleDelView(index)" />
              </span>
              <span class="view-tabs_add" @click="handleAddView('addview')">
                新建
                <i class="el-icon-plus" />
              </span>
            </div>
            <div class="view-edit">
              <el-button size="mini" type="primary" @click="dialog.view = true">编辑</el-button>
            </div>
          </div>

          <vue-ueditor-wrap
            ref="ueditor"
            v-model="editData"
            editor-id="editor"
            style="flex: 1;display: flex;"
            mode="observer"
            :destroy="true"
            :observer-debounce-time="100"
            :observer-options="{ attributes: true, characterData: true, childList: true, subtree: true }"
            :config="myConfig"
            @input="test"
            @ready="ready"
          />
        </el-card>
      </div>
      <div class="attribute">
        <div class="attr-left">
          <div class="field">
            <div class="field-title">
              域
            </div>
            <div class="tree">
              <el-tree
                :data="schemaTreeData"
                :props="defaultProps"
                default-expand-all
                highlight-current
                @node-click="handleTreeRow"
              >
                <span
                  slot-scope="{ node, data }"
                  draggable="true"
                  class="custom-tree-node"
                  @dragstart="handleTreedragstart($event, node, data)"
                  @dragend="handleDragend($event, node, data)"
                >
                  <span v-if="data.fieldName">{{ node.label }}({{ data.fieldName }})</span>
                  <span v-else>{{ node.label }}</span>
                </span>
              </el-tree>
            </div>
          </div>
        </div>
        <div class="attr-right">
          <el-tabs v-model="tabsActive" type="border-card" stretch class="tabs">
            <el-tab-pane name="field" label="属性">
              <FormView ref="formView" @handleChange="handleFormViewChange" @handleOptionsChange="handleOptionsChange" />
            </el-tab-pane>
            <el-tab-pane name="rule" label="规则">
              <div class="rule-list">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="字段标识">
                    <el-input v-model="form.name" />
                  </el-form-item>
                  <el-form-item label="默认值">
                    <el-input v-model="form.defaultValue" />
                  </el-form-item>
                  <el-form-item label="占位内容">
                    <el-input v-model="form.placeholder" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">
                      保存
                    </el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <!-- dialog   -->
    <el-dialog title="新增视图" width="300px" :visible.sync="dialog.addview" :close-on-click-modal="false">
      <el-form :model="formMap.view">
        <el-form-item label="视图名称" label-width="80px">
          <el-input v-model="formMap.view.title" size="small" placeholder="请输入视图名称" />
        </el-form-item>
        <el-form-item label="视图类型" label-width="80px">
          <el-select v-model="formMap.view.type" size="small" placeholder="请选择视图类型">
            <el-option label="桌面端视图" value="desktop" />
            <el-option label="移动端视图" value="mobile" />
            <el-option label="打印视图" value="print" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCloseDialog('addview')">取 消</el-button>
        <el-button type="primary" @click="handleSaveAddView">确 定</el-button>
      </div>
    </el-dialog>

    <!--  表单属性  -->
    <el-dialog title="表单属性" width="400px" :visible.sync="dialog.formInfo" :close-on-click-modal="false">
      <el-form :model="formMap.formInfo" label-width="80px">
        <el-form-item label="表单名称">
          <el-input v-model="formMap.formInfo.name" size="small" @change="IBaseInfoNameChange" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formMap.formInfo.remark" type="textarea" rows="3" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleCloseDialog('formInfo')">取 消</el-button>
        <el-button type="primary" size="small" @click="handleFormInfoEdit">确 定</el-button>
      </div>
    </el-dialog>

    <!--  视图编辑  -->
    <el-dialog title="表单属性" width="400px" :visible.sync="dialog.view" :close-on-click-modal="false">
      <el-form ref="form" :model="viewProperties" label-width="80px">
        <el-form-item label="宽度">
          <el-input v-model="viewProperties.width" size="small" @change="handleChangeWidth" />
        </el-form-item>
        <el-form-item label="背景色">
          <el-color-picker v-model="viewProperties.backgroundColor" size="small" @change="handleChangeBGColor" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleCloseDialog('view')">取 消</el-button>
        <el-button type="primary" size="small" @click="handleFormInfoEdit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 表格拖拽  -->
    <el-dialog title="表格" width="400px" :visible.sync="dialog.tableInfo" :close-on-click-modal="false">
      <el-form ref="form" :model="formMap.tableSet" label-width="80px">
        <el-form-item label="行数">
          <el-input v-model="formMap.tableSet.row" placeholder="请输入行数" size="small" />
        </el-form-item>
        <el-form-item label="列数">
          <el-input v-model="formMap.tableSet.column" placeholder="请输入列数" size="small" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleCloseDialog('tableInfo')">取 消</el-button>
        <el-button type="primary" size="small" @click="handleTableSet($event)">确 定</el-button>
      </div>
    </el-dialog>
    <!--    <el-button type="primary" @click="handleSave">保存</el-button>-->
  </section>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import DefaultMenu from '@views/FormDesigner/components/menu/default'
import Container from '@views/FormDesigner/components/menu/container'
import FormView from '@views/FormDesigner/components/attribute'
// import template_attrs from '@views/FormDesigner/components/attribute'
import { randomCode, getTempName, getFormatList } from '@utils/ueditTools'
// import XEUtils from 'xe-utils'
// import qs from 'querystring'
export default {
  name: 'Editor',
  components: {
    VueUeditorWrap,
    DefaultMenu,
    Container,
    FormView
  },
  data() {
    return {
      editData: '',
      dialog: {
        addview: false,
        view: false,
        formInfo: false,
        tableInfo: false
      },
      activeName: '1',
      attrActiveName: '1',
      tabsActive: 'field',
      show: false,
      myConfig: {
        toolbars: [[
          'source', '|', 'undo', 'redo', '|',
          'bold', 'italic', 'underline', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', '|',
          'forecolor', 'backcolor', '|',
          'paragraph', 'fontfamily', 'fontsize', '|',
          'directionalityltr', 'directionalityrtl', 'indent', '|',
          'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
          'horizontal', 'inserttable'
        ]],
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: '100%',
        // 初始容器宽度
        initialFrameWidth: 'calc(100% - 2px)',
        elementPathEnabled: false,
        enableAutoSave: true,
        wordCount: false,
        disabledTableInTable: false,
        allowDivTransToP: false,
        iframeCssUrl: '/static/UEditor/themes/iframe.css'
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        // serverUrl: 'http://35.201.165.105:8000/controller.php',
      },
      UEdit: null,
      UE: null,
      formMap: {
        view: {
          title: '',
          type: ''
        },
        formInfo: {
          name: '',
          remark: ''
        },
        tableSet: {
          row: 0,
          column: 0
        }
      },
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      element: null,
      els: [],
      container_elId: '',
      formProperties: {
        fieldName: '',
        name: '',
        dataType: '',
        defaultVal: '',
        isRepeat: false,
        disabled: false
      },
      viewProperties: {
        width: 0,
        backgroundColor: ''
      },
      bodyStyle: {
        display: 'flex',
        flex: 1
      },
      schemaTreeData: this.$store.state.app.schemaTreeData,
      defaultProps: {
        children: 'group',
        label: 'controlName'
      },
      viewTabsIndex: 0,
      viewTabs: this.$store.state.app.viewTabs,
      IBaseInfo: this.$store.state.app.IBaseInfo,
      formDesignerData: [
        {
          view: {
            title: '',
            type: '',
            html: ''
          }
        }
      ],
      attrs: []
    }
  },
  computed: {
  },
  watch: {
    editData(val) {
      this.viewTabs[this.viewTabsIndex].html = val
      this.$store.commit('updateViewTabs', this.viewTabs)
    },
    IBaseInfo: {
      handler(val) {
        this.$store.commit('updateIBaseInfo', val)
      },
      deep: true
    },
    schemaTreeData: {
      handler(val) {
        this.$store.commit('updateSchemaTreeData', val)
      },
      deep: true
    },
    formProperties: {
      handler(val) {
        // console.log(val, 'formProperties')
        this.recursionSetVal(val.el_id, this.schemaTreeData, val)
      },
      deep: true
    }
    // 'formProperties.defaultVal': {
    //   handler: function(val) {
    //     console.log(val)
    //     console.log(this.els, 'els')
    //   }
    // }
  },
  created() {
    console.log(this.$refs.ueditor)
  },
  mounted() {
    window.addEventListener('message', (event) => {
      if (event.data.container_elId) {
        this.$set(this, 'container_elId', event.data.container_elId)
      }
    })
  },
  methods: {
    // 初始化UEdit
    ready(e) {
      const _this = this
      const UE = window.UE
      _this.UEdit = e
      e.setContent('')
      e.setContent(this.viewTabs[0].html)
      // window.UE = e
      // console.log(e)
      e.addListener('click', function(t, evt) {
        // console.log(evt)
        evt = evt || window.event
        const el = evt.target || evt.srcElement
        // console.log(el.style.border = '1px solid red')
        UE.dom.domUtils.findParent(el, function(node) {
          console.log(node)
          return false
        }, true)
        // console.dir(el)
        const designerTpye = el.getAttribute('designerTpye')

        if (designerTpye) {
          // console.dir(el)
          // 获取对应组件的需要设置的属性参数
          // _this.attrs = template_attrs.filter(item => {
          //   return item.name === designerTpye
          // })[0].attrs
          // console.log(_this.attrs)

          const el_id = el.getAttribute('data-elId')
          const currSchema = _this.findPathByElId(el_id, _this.schemaTreeData)
          console.log(currSchema, 'currSchema')
          _this.$setObjDatas(_this.formProperties, currSchema)
          // console.log(_this.formProperties)
          _this.tabsActive = 'field'
          _this.selectUi(designerTpye, el)
          _this.$refs.formView.setDefaultData(currSchema)
        }
      })
    },
    test(val) {},
    // 组件拖拽开始事件
    ondragstart(e) {
      // console.dir(e.target.children[1].firstElementChild)
      e.dataTransfer.setData('text/plain', '\t')
    },
    // 组件拖拽结束事件
    dragend(e) {
      const _this = this
      // console.log(e)
      const minX = _this.$refs.ueditor.$el.childNodes[0].offsetLeft
      const minY = _this.$refs.ueditor.$el.childNodes[0].childNodes[0].childNodes[1].offsetTop
      const maxY = _this.$refs.ueditor.$el.childNodes[0].childNodes[0].getElementsByClassName('edui-editor-iframeholder').edui1_iframeholder.offsetHeight + minY
      const maxX = _this.$refs.ueditor.$el.childNodes[0].childNodes[0].getElementsByClassName('edui-editor-iframeholder').edui1_iframeholder.offsetWidth + minX
      // 判断是否在拖拽区域内
      if ((Number(minX) < Number(e.screenX) && Number(e.screenX) < Number(maxX)) && (Number(minY) < Number(e.screenY) &&
       Number(e.screenY) < Number(maxY))) {
        // todo 监听有 BUG

        const designerType = e.toElement.getElementsByClassName('temp')[0].children[0].getAttribute('designerTpye')
        // 生成随机码
        const elId = randomCode()
        e.toElement.getElementsByClassName('temp')[0].children[0].setAttribute('data-elid', `${designerType}_${elId}`)

        // console.log(designerType)
        const temp = e.toElement.getElementsByClassName('temp')[0].innerHTML
        if (designerType === 'table') {
          _this.dialog.tableInfo = true
        } else {
          _this.setContent(temp)
          _this.setSchema(designerType, elId, temp)
        }
      }
    },
    // 表格拖拽设置
    handleTableSet(e) {
      // console.log(this.$refs.ueditor.$el.offsetWidth)
      const elId = randomCode()
      const tableElId = `table_${elId}`
      const ueditorWidth = this.$refs.ueditor.$el.offsetWidth
      let str = ''
      str += '<table width="100%" designerTpye="table" data-elid="' + tableElId + '">'

      for (let i = 0; i < this.formMap.tableSet.row; i++) {
        if (i === 0) {
          str += '<tr class="firstRow">'
        } else {
          str += '<tr>'
        }
        for (let j = 0; j < this.formMap.tableSet.column; j++) {
          str += ' <td width="' + ueditorWidth / this.formMap.tableSet.column + '" valign="top"></td>'
        }
        str += '</tr>'
      }
      str += '</table>'

      this.setContent(str)
      this.setSchema('table', elId, str)
      this.handleCloseDialog('tableInfo')
    },
    setContent(temp) {
      this.UEdit.focus()
      this.UEdit.execCommand('insertHtml', `${temp}`)
    },
    setSchema(designerType, elId, temp) {
      // console.log()
      const _this = this
      const elsItem = {
        el_id: elId,
        type: designerType,
        temp: temp
      }
      _this.els.push(elsItem)
      // console.log(_this.container_elId, '_this.container_elId')
      // console.log(designerTpye)
      if (_this.container_elId) {
        const treeItem = {
          el_id: `${designerType}_${elId}`,
          controlName: getTempName(designerType),
          fieldName: `${designerType}_${elId}`,
          type: designerType,
          group: [],
          disabled: false
        }
        // console.log(_this.schemaTreeData[0].group)
        _this.queryArrById(_this.schemaTreeData[0].group, _this.container_elId).group.push(treeItem)
        _this.container_elId = ''
      } else {
        const treeItem = {
          el_id: `${designerType}_${elId}`,
          type: designerType,
          fieldName: `${designerType}_${elId}`,
          controlName: `${getTempName(designerType)}`,
          group: [],
          disabled: false
        }
        _this.schemaTreeData[0].group.push(treeItem)
      }

      // console.log(_this.schemaTreeData[0])
      _this.$set(_this.formProperties, 'name', `${designerType}_${elId}`)
      // console.log(_this.UEdit.getContent())
      _this.viewTabs[_this.viewTabsIndex].html = _this.UEdit.getContent()
    },

    // 处理数据
    createDomJson() {},
    // 域拖拽开始事件
    handleTreedragstart(e, node, data) {
      e.dataTransfer.setData('text/plain', '\t')
    },
    // 域拖拽结束事件
    handleDragend(e, node, data) {
      const temp = this.queryArrById(this.els, data.el_id).temp
      this.UEdit.focus()
      this.UEdit.execCommand('insertHtml', `${temp}`)
    },
    // 组件属性编辑保存
    onSubmit() {
      this.element.defaultValue = this.form.defaultValue || ''
      this.element.name = this.form.name
      this.element.placeholder = this.form.placeholder
    },
    // 获取当前element及类型
    selectUi(type, el) {
      this.element = el
    },
    // 修改表单名称
    IBaseInfoNameChange() {
      this.schemaTreeData[0].name = this.IBaseInfo.name
    },
    // 视图设置编辑区域背景颜色
    handleChangeBGColor(e) {
      this.$refs.ueditor.$el.childNodes[0].childNodes[0].getElementsByClassName('edui-editor-iframeholder').edui1_iframeholder.children[0].contentWindow.frameElement.contentDocument.documentElement.style.background = e
    },
    /**
     * 改变视图宽度
     * @param width 视图宽度
     *
     */
    handleChangeWidth(width) {
      this.$refs.ueditor.$el.childNodes[0].childNodes[0].getElementsByClassName('edui-editor-iframeholder').edui1_iframeholder.children[0].contentWindow.frameElement.contentDocument.documentElement.style.width = `${width}px`
      this.$refs.ueditor.$el.childNodes[0].childNodes[0].getElementsByClassName('edui-editor-iframeholder').edui1_iframeholder.children[0].contentWindow.frameElement.contentDocument.documentElement.style.margin = `0 auto`
      this.$refs.ueditor.$el.childNodes[0].childNodes[0].getElementsByClassName('edui-editor-iframeholder').edui1_iframeholder.children[0].contentWindow.frameElement.contentDocument.documentElement.style.border = `1px solid red`
    },
    handleSave() {
      console.log(this.formProperties)
    },
    /* 视图切换 */
    handleClickViewTabs(index) {
      this.viewTabsIndex = index
      // this.UEdit.setContent('')
      this.UEdit.setContent(this.viewTabs[index].html || '')
    },
    /* 添加视图 */
    handleAddView(view) {
      this.$initObjectData(this.formMap.view)
      this.handleOpenDialog(view)
    },
    // 视图编辑
    handleView() {

    },
    /* 保存添加视图*/
    handleSaveAddView() {
      const obj = {
        title: this.formMap.view.title,
        type: this.formMap.view.type
      }
      this.viewTabs.push(obj)
      this.handleCloseDialog('addview')
      this.viewTabsIndex = this.viewTabs.length - 1
      this.$store.commit('updateViewTabs', this.viewTabs)
      this.UEdit.setContent('')
    },
    /* 删除视图 */
    handleDelView(index) {
      this.viewTabs.splice(index, 1)
      if (index === this.viewTabsIndex) {
        this.viewTabsIndex = (this.viewTabsIndex - 1)
      }
    },
    // 点击字段结构节点
    handleTreeRow(row, node, tree) {
      this.tabsActive = 'field'
      if (row.el_id === 'form_0') {
        return false
      }
      // console.log(row)
      this.$setObjDatas(this.formProperties, row)
      this.$refs.formView.setDefaultData(row)
    },
    handleFormInfo() {
      this.handleOpenDialog('formInfo')
      const formInfo = {
        name: this.schemaTreeData[0].name,
        remark: this.schemaTreeData[0].remark
      }
      this.$setObjDatas(this.formMap.formInfo, formInfo)
    },
    // 表单属性修改
    handleFormInfoEdit() {
      // this.setData(this.formMap.formInfo, this.schemaTreeData[0])
      this.$setObjDatas(this.schemaTreeData[0], this.formMap.formInfo)
      this.handleCloseDialog('formInfo')
    },
    // 监听域属性表单参数变化
    handleFormViewChange(val) {
      console.dir(this.element, 'element')
      console.log(this.element, 'element')
      console.log(val)
      this.$initObjectData(this.formProperties)
      this.$setObjDatas(this.formProperties, val)
      console.log(this.formProperties, 'this.formProperties')
      this.$refs.formView.dataTypes = getFormatList(val.type)
      this.$set(this.element, 'value', this.formProperties.defaultVal)
      // this.element.value = this.formProperties.defaultValue
      this.element.name = this.formProperties.fieldName
      this.element.placeholder = this.formProperties.placeholder || ''
      this.element.disabled = this.formProperties.disabled
      this.element.multiple = this.formProperties.multiple
      // console.log(val, 'handleFormViewChange')
      // this.formProperties = val
    },
    // 通用设置选项方法
    handleOptionsChange(val) {
      // console.log(val)
    },
    /* ==========通用操作方法===============*/
    /**
     *  打开 dialog
     * @param dialog dialog 名称
     *
     */
    handleOpenDialog(dialog) {
      this.dialog[dialog] = true
    },
    /**
     *  关闭 dialog
     * @param dialog dialog 名称
     *
     */
    handleCloseDialog(dialog) {
      this.dialog[dialog] = false
    },
    /* =========== 公共方法 ====================*/
    /**
     *  通过ID查询数组
     * @param arr 数组
     * @param id  ID
     * @returns {string}
     */
    queryArrById(arr, id) {
      return arr.filter(item => {
        return item.el_id === id
      })[0]
    },
    /**
     * 通过 id 递归查询对应值并修改
     * @param id  指定节点ID
     * @param nodes 树形结构数据
     * @param obj 赋值
     * @returns {{}}
     */
    recursionSetVal(id, nodes, obj) {
      for (let i = 0; i < nodes.length; i++) {
        const tmpPath = {}
        if (id === nodes[i].el_id) {
          this.$setObjDatas(nodes[i], obj)
          return tmpPath
        }
        if (nodes[i].group) {
          const findResult = this.recursionSetVal(id, nodes[i].group, obj)
          if (findResult) {
            return findResult
          }
        }
      }
    },
    /**
     * 通过 ID 查询对应节点的数据并返回
     * @param id  对应节点的ID
     * @param nodes 数据源
     * @param path  临时变量
     * @returns {{}|undefined|*|{}}
     */
    findPathByElId(id, nodes, path) {
      if (path === undefined) {
        path = {}
      }
      for (let i = 0; i < nodes.length; i++) {
        let tmpPath = {}
        if (id === nodes[i].el_id) {
          tmpPath = nodes[i]
          return tmpPath
        }
        if (nodes[i].group) {
          const findResult = this.findPathByElId(id, nodes[i].group, tmpPath)
          if (findResult) {
            return findResult
          }
        }
      }
    }
  }
}
</script>
<style lang='scss' scoped>
@import "~@scss/uedit.scss";
</style>
<style lang="scss">
  /* 模块通用样式 */
  .temp {
    display: none;
  }
  .tag{
    background: #f4f6fc;
    border: 1px solid #f4f6fc;
    color: #5b6b73;
    width: 100%;
    text-align: center;
    display: inline-block;
    padding: 10px;
    line-height: 30px;
    font-size: 16px;
    vertical-align: middle;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    &:hover{
      border: 1px dashed #1890ff;
      color: #1890ff;
      cursor: move;
      & .icon{
        color: #1890ff;
      }
    }
    span{
      display: block;
      font-size: 12px;
      margin: {
        top: 0;
        bottom: 0;
      };
    }
    .icon{
      font-size: 26px;
      color: #5b6b73;
    }
  }
</style>
